<template>
  <div class="card p-2 rounded-md m-2 gap-2 flex-col flex">
    <div class="head-count rounded-md px-2 p-1 text-[#52AC29]" v-if="status == '待确认'">
      报名人数：{{ workers.length }}/{{ headCount }}
    </div>

    <div class="head-count rounded-md px-2 p-1 text-[#52AC29]" v-if="status != '待确认'">
      {{ status }}
    </div>

    <div class="rounded-md px-2 p-1 font-bold text-large-2xl">
      {{ title }}
    </div>

    <div class="rounded-md px-2 p-1 text-[black]">
      订单编号：{{ _id }}
    </div>

    <div class="rounded-md px-2 p-1 text-[black]">
      联系电话：{{ phone }}
    </div>

    <div class="rounded-md px-2 p-1 text-[black]">
      开工时间: {{ dayjs(startedAt).format("YYYY-MM-DD HH:mm") }}
    </div>

    <div class="rounded-md px-2 p-1 text-[black]">
      预算：￥{{ preparationsPrice }}
    </div>

    <div class="rounded-md px-2 p-1 text-[black]">
      工钱：￥{{ price }}
    </div>

    <div class="flex gap-2 items-center">
      <image class="w-4 h-4" src="/static/location.png" />
      {{ location }}
    </div>



    <div class="flex gap-2 justify-end w-full">

      <div class="head-count rounded-md px-2 p-1 text-[#52AC29]" v-if="workers.length > 0 && status == '待确认'">
        <navigator :url="`/pages/checkWorkers/checkWorkers?rid=${props._id}`" hover-class="borderL">
          <div class="flex-none">审核</div>
        </navigator>
      </div>


      <div class="cancelorder rounded-md px-2 p-1 text-[#CA56E6]" v-if="status == '已完成'">
        <div @touchend="handleSwitch" hover-class="borderL">&nbsp&nbsp评&nbsp&nbsp价&nbsp&nbsp</div>
      </div>

      <div class="showdetail rounded-md px-2 p-1 text-[#0F40F5]" v-if="status == '已完成'">
        <navigator url="/pages/mypublish/mypublish?cur=0" hover-class="borderL">
          <div class="flex-none">查看评价</div>
        </navigator>
      </div>

      <div class="cancelorder rounded-md px-2 p-1 text-[#CA56E6]" v-if="status == '待确认' || status == '已发布'">
        <navigator url="/pages/cancelResult/cancelResult" hover-class="borderL">
          <div @touchend="cancel">申请撤单</div>
        </navigator>
      </div>

      <!-- <div class="showdetail rounded-md px-2 p-1 text-[#0F40F5]" v-if="status == '待确认'">
        <navigator url="/pages/mypublish/mypublish?cur=2" hover-class="borderL">
          <div @touchend="confirm">确认订单</div>
        </navigator>
      </div> -->

      <div class="cancelorder rounded-md px-2 p-1 text-[#CA56E6]" v-if="status == '进行中'">
        <navigator :url="`/pages/workerinformation/workerinformation?rid=${_id}`" hover-class="borderL">
          <div>查看师傅信息</div>
        </navigator>
      </div>

      <div class="showdetail rounded-md px-2 p-1 text-[#0F40F5]">
        <navigator :url="`/pages/requirements/requirements?id=${_id}`" hover-class="borderL">
          <div>查看详情</div>
        </navigator>
      </div>
    </div>


  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { useUserStore } from '../stores/user';
import { ref } from 'vue'
const props = defineProps({
  status: String,
  title: String,
  _id: String,
  phone: String,
  startedAt: Number, //时间戳
  preparationsPrice: Number,
  price: Number,
  location: String,
  headCount: Number,
})
const user = useUserStore()
const workers = ref([])
uni.request({
  url: '/apply/order/' + props._id,
  success: ({ data }) => {
    workers.value = data
  }
})

function cancel() {
  uni.request({
    url: '/order/' + props._id,
    method: 'DELETE',
    success: ({ data }) => {
      console.log(data)
    }
  }) //向后端请求取消
}

function confirm() {
  uni.request({
    url: '/order/confirm/' + props._id,
    success: ({ data }) => {
      console.log(data)
    }
  }) //向后端请求开工
  const i = user.publishes.findIndex(v => v._id === props._id)
  user.publishes[i].status = '已开工'
}


function handleSwitch() {
  uni.navigateTo({ url: '/pages/comment/comment?id=' + props._id + '&isOwner=true' })
}
</script>

<style scoped>
.head-count {
  border: 2px solid #52AC29;
}

.cancelorder {
  border: 2px solid #CA56E6;
}

.showdetail {
  border: 2px solid #0F40F5;
}

.card {
  border: 1px solid rgba(31, 31, 31);
}
</style>